First, we will have to create a new Content Type under the Structure menu. I labelled mine as Nivo Slider Portfolio.
Under the following tabs, uncheck the following items:
Publishing Options --> 'Promoted to front page'
Display Settings --> 'Display author and date information'
Menu Settings --> 'Main menu' (as we will be creating a block rather than a page)
and within Comment Settings, change the Default Comment Settings to Hidden. Click 'save and add fields'.
Now let's add an Image and Link field to this new content type! Here are the list of details. Note: If you have already went through Greg's "Views Slideshow" walkthrough, you should select the Image field from the 'Add existing field' below. Label: Image Field name: field_image Type of data to store: File
Label: Link Field name: field_link Type of data to store: Link Widget: Link On the next screen just click on 'Save field settings' (We don't need to change any settings). Remove the Body Field and click 'save'.
You would then be lead to a page similar to the one below:
Change the number of values in 'Image Field Settings' to 5 for the moment. This will set how many images you would want to display on the Nivo Slider. (Other options allow us to streamline our image submissions workflow by restricting the minimum and maximum image sizes, limiting file sizes, etc.)
We can adjust these settings later, click 'Save Settings' for now.
You will be bounced back to the editing fields page like the image below. Click 'save'.
Adding Content to the Quick Scenario
Now we need to add dummy content for our Nivo Slider.
Go to Add Content --> Nivo Slider Portfolio (or any name you have chosen to label your content type above). Label your Nivo Slider "Nivo Slide" for the moment.
Upload a few images of your choice to display for the moment.
Set comment settings to 'closed'.
Save.
Configuring Views
Navigate to Structure --> Views --> Add new view. View name: Nivo Slider.
Uncheck 'create new page' and check off create a block!! Under display format --> click 'Views Nivo Slider' in dropdown menu AND of 'fields' next to it.
You should now have something that looks like the image below.
Click 'save and exit'. Click continue editing by scrolling down to Nivo Slider and clicking edit on the right.
You should now be led to the Nivo Slider (Content) Display Options:
In the Fields section, notice we currently have Content: Title. Here, we need to add Content: Image and Content: Link. Click 'Apply'.
For the Configure field: Content: Image, uncheck create a label. Select Formatter as Image and Image style as large.
*IMPORTANT: Expand the 'Multiple Field Settings' and UNCHECK 'display all values in the same row! (This is essential for the module to work properly for multiple images!!) Click 'Apply'.*
For the Configure field: Content: Link, uncheck create a label. Select Formatter to URL, as link.
Now we need to filter our criteria. In the Filter Criteria section, we need to add Content: Type and checkmark Nivo Slider Portfolio.
Under Format, beside 'Show', click Fields and change it to 'Views Nivo Slider'. After you click apply, you would be guided to the Row Style Options. Adjust the settings according to the image below.
In Format Section, beside Views Nivo Slider, select settings. Here, you are welcomed to change these settings according to your preference of how you want your Nivo Slide to display. This is what I have done to closely match with the example displayed above.
Change Image field style to 'large' and the effect to 'slideInLeft'.
Change Control Navigator to Basic.
Turn off the Direction Navigator, Keyboard Navigator and Pause on Hover, .
Click Apply and remember to press save to save your newly added views!
Lastly, to make it show on your page, go to Structure --> Blocks. Enable your 'View: Nivo Slider' in your content section. Save block.
Setup:
Before you begin, you would need to install the Views Nivo Slider and Links module from the given link below.http://drupal.org/project/views_nivo_slider
http://drupal.org/project/link
Ensure you have the Views Nivo Slider, Link,Views and Chaos tools checked off. Save Configuration.
Creating a Quick Scenario to Test the Nivo Slider
First, we will have to create a new Content Type under the Structure menu. I labelled mine as Nivo Slider Portfolio.Under the following tabs, uncheck the following items:
- Publishing Options --> 'Promoted to front page'
- Display Settings --> 'Display author and date information'
- Menu Settings --> 'Main menu' (as we will be creating a block rather than a page)
and within Comment Settings, change the Default Comment Settings to Hidden.Click 'save and add fields'.
Now let's add an Image and Link field to this new content type! Here are the list of details.
Note: If you have already went through Greg's "Views Slideshow" walkthrough, you should select the Image field from the 'Add existing field' below.
Label: Image
Field name: field_image
Type of data to store: File
Label: Link
Field name: field_link
Type of data to store: Link
Widget: Link
On the next screen just click on 'Save field settings' (We don't need to change any settings).
Remove the Body Field and click 'save'.
You would then be lead to a page similar to the one below:
Change the number of values in 'Image Field Settings' to 5 for the moment. This will set how many images you would want to display on the Nivo Slider. (Other options allow us to streamline our image submissions workflow by restricting the minimum and maximum image sizes, limiting file sizes, etc.)
We can adjust these settings later, click 'Save Settings' for now.
You will be bounced back to the editing fields page like the image below.
Click 'save'.
Adding Content to the Quick Scenario
Now we need to add dummy content for our Nivo Slider.Go to Add Content --> Nivo Slider Portfolio (or any name you have chosen to label your content type above). Label your Nivo Slider "Nivo Slide" for the moment.
Upload a few images of your choice to display for the moment.
Set comment settings to 'closed'.
Save.
Configuring Views
Navigate to Structure --> Views --> Add new view.View name: Nivo Slider.
Uncheck 'create new page' and check off create a block!!
Under display format --> click 'Views Nivo Slider' in dropdown menu AND of 'fields' next to it.
You should now have something that looks like the image below.
Click 'save and exit'. Click continue editing by scrolling down to Nivo Slider and clicking edit on the right.
You should now be led to the Nivo Slider (Content) Display Options:
*IMPORTANT: Expand the 'Multiple Field Settings' and UNCHECK 'display all values in the same row! (This is essential for the module to work properly for multiple images!!) Click 'Apply'.*
For the Configure field: Content: Link, uncheck create a label. Select Formatter to URL, as link.
In Format Section, beside Views Nivo Slider, select settings. Here, you are welcomed to change these settings according to your preference of how you want your Nivo Slide to display. This is what I have done to closely match with the example displayed above.
Change Image field style to 'large' and the effect to 'slideInLeft'.
Change Control Navigator to Basic.
Turn off the Direction Navigator, Keyboard Navigator and Pause on Hover, .
Click Apply and remember to press save to save your newly added views!
Lastly, to make it show on your page, go to Structure --> Blocks. Enable your 'View: Nivo Slider' in your content section. Save block.